<template>
  <div>
    <el-card>
      设备编号:
      <el-input
        placeholder="请输入"
        style="width: 200px; margin: 0 20px"
        v-model="params.innerCode"
        @change="changes"
      ></el-input>
      <el-button type="primary" @click="searchFn">查询</el-button>
    </el-card>
    <el-card>
      <!-- <el-popover placement="right" width="400" trigger="click">
        <el-form v-if="show">
          <el-form-item>
            区域名称:<el-input
              placeholder="请输入"
              style="width: 200px; margin: 0 20px"
              maxlength="15"
              show-word-limit
              v-model="data.name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            备注说明:<el-input
              placeholder="请输入备注(不超过40字)"
              style="width: 200px; margin: 0 20px"
              type="textarea"
              maxlength="40"
              show-word-limit
              v-model="data.remark"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancelFn">取消</el-button>
            <el-button style="background-color: orange" @click="createFn"
              >创建</el-button
            >
          </el-form-item>
        </el-form>
        <el-button slot="reference" style="background: orange" @click="addFn"
          >新建</el-button
        >
      </el-popover> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
        <el-table-column prop="type.name" label="设备型号"> </el-table-column>
        <el-table-column prop="node.addr" label="详细地址"> </el-table-column>
        <el-table-column prop="node.ownerName" label="合作商">
        </el-table-column>
        <el-table-column prop="vmStatus" label="设备状态">
          <template #default="scope">
            <i v-if="scope.row.vmStatus === 0">未投放</i>
            <i v-else-if="scope.row.vmStatus === 1">运营</i>
            <i v-else>撤机</i>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="200px">
          <el-button type="text" @click="huodao">货道</el-button>
          <el-button type="text" @click="celue">策略</el-button>
          <el-button type="text" @click="edit">修改</el-button>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" :title="title">
      <template>
        <div v-if="isAdd">
          <span>货道行数:</span>
          <span>货道列数:</span>
          <span>货道容量(个):</span>
          <div
            style="width: 60px; height: 80px; background-color: cornflowerblue"
          ></div>
        </div>
        <div v-else-if="isPreview">运营</div>
        <div v-else>撤机</div>
      </template>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getSbList } from "@/api/sbgl";
export default {
  data() {
    return {
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        status: "",
        innerCode: "",
      },
      isAdd: false,
      isPreview: false,
      isEdit: false,
      dialogVisible: false,
      title: "",
    };
  },
  methods: {
    async getSbList() {
      const res = await getSbList(this.params);
      console.log(res.data.currentPageRecords);
      this.tableData = res.data.currentPageRecords;
    },
    searchFn() {
      this.getSbList();
    },
    changes() {
      this.getSbList();
    },
    huodao() {
      (this.dialogVisible = true),
        (this.title = "货道设置"),
        (this.isAdd = true);
    },
    celue() {
      (this.dialogVisible = true),
        (this.isAdd = false),
        (this.isPreview = true);
    },
    edit() {
      this.dialogVisible = true;
      (this.isAdd = false), (this.isPreview = false);
      this.isEdit = true;
    },
  },
  created() {
    this.getSbList();
  },
};
</script>

<style></style>
